<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Tabs test 2</title>	
		
		<style>
			.tab {
				background-color:#ccc;
				display:inline;
			}
		</style>
		<script>
			function main()
			{
				var ms = new Date().getTime();
				
				var body = document.getElementById ( "tabs" );
				
				var a = body.childNodes;
				var a2 = [];
				var a3 = [];
				var l = a.length;
				for( var i = 0; i < l; i++ )
				{
					if( a[i].nodeType == 1 )
						a2[i] = a[i];
					a3[i] = a[i];
				}
				for( var i in a3 )
				{
					body.removeChild( a3[i] );
				}
				
				var tabgroup = document.createElement ( "span" );
				var oldgroup;
				
				body.appendChild( tabgroup );
				
				for(var i in a2 )
				{
					var el = a2[ i ];
					tabgroup.appendChild( el );
					var w =  el.offsetWidth
					tabgroup.removeChild( el );
					
					//alert( "with " + el + " : " + tabgroup.offsetWidth + " + " + w + " < " + body.offsetWidth + " = " + ( tabgroup.offsetWidth + w < body.offsetWidth ) );
					
					if( tabgroup.offsetWidth + w < body.offsetWidth )
					{
						tabgroup.appendChild( el );
					}
					else
					{
						oldgroup = tabgroup;
						tabgroup.style.display = "block";
						tabgroup = document.createElement ( "span" );
		
						body.insertBefore( tabgroup, oldgroup );
						
						tabgroup.appendChild( el );
					}
				}
				
				tabgroup.style.display = "block";
				
				alert( new Date().getTime() - ms );
			}
		</script>
	</head>
	
	<body onload="main();">
		<div id="tabs">
			<div class="tab">Tab1 name jh k</div>
			<div class="tab">Tab2 name</div>
			
			<div class="tab">Tab3 name lj</div>
			<div class="tab">Tab4 namekh kj</div>
			<div class="tab">Tab5 namej</div>
			<div class="tab">Tab6 name h jk h</div>
			<div class="tab">Tab7 namekjh k</div>
			<div class="tab">Tab8 namej hk</div>
			<div class="tab">Tab9 nam kj he</div>
			<div class="tab">Tab10 name k hkj  hk</div>
			<div class="tab">Tab11 name kjh</div>
			<div class="tab">Tab12 namke</div>
			<div class="tab">Tab13 namekjh kj</div>
			<div class="tab">Tab14 namejk</div>
			<div class="tab">Tab15 namekjh</div>
			<div class="tab">Tab16 namekjh k</div>
			<div class="tab">Tab17 namejh kj</div>
				<!--
			<div class="tab">Tab18 namejh  jkj</div>
			<div class="tab">Tab19 namek jhkj</div>
			<div class="tab">Tab20 name kjhkj j</div>
			<div class="tab">Tab21 name jh kj h</div>
			<div class="tab">Tab22 name</div>
			<div class="tab">Tab23 name j jk</div>
			<div class="tab">Tab24 name k</div>
			<div class="tab">Tab25 name</div>
			<div class="tab">Tab26 name kjh</div>
			<div class="tab">Tab27 name hj</div>
			<div class="tab">Tab28 name</div>
			<div class="tab">Tab29 name jh kj</div>
			-->
		</div>
	</body>
</html>
